<template>
  <rt-view>
    <rt-header>
      <rt-navbar :onBack="closePage">
        <rt-search
          v-focus
          v-model="name"
          placeholder="按活动名称进行查询"
          @on-search="onSearch()"
          @click="click()"
        ></rt-search>
      </rt-navbar>
    </rt-header>
    <rt-content ref="content">
      <rt-list
        ref="fetchList"
        :fetch="fetch"
        class="cus-content"
        @toggle="toggle"
      >
        <div
          slot-scope="{ row }"
          class="account-item"
          @click="clickToDetail(row)"
        >
          <div class="card-content">
            <div class="top-img-title">
              <div class="img-info">
                  <img :src="showRemotePic(row.avatar)" @error="showErrorPic($event)"/>
              </div>
              <div class="title-info">{{ row.name }}</div>
            </div>
            <div class="account-content">
              <div>
                <div class="img-svg">
                  <img src="../../assets/imgs/time.png" />
                </div>
                <div class="new_time" v-if="row.start_time.substr(0,10) === row.end_time.substr(0,10)">
                  {{ row.start_time | moment('YYYY-MM-DD HH:mm') }}至{{
                    row.end_time | moment('HH:mm')
                  }}
                </div>
                <div class="new_time" v-else>
                  {{ row.start_time | moment('YYYY-MM-DD') }}至{{
                  row.end_time | moment('MM-DD')
                  }}
                </div>
              </div>
              <div v-if="row.province !== ''&& row.province !== null">
                <div class="img-svg">
                  <img src="../../assets/imgs/location.png" />
                </div>
                <div class="new_address" >
                  {{ row.province }}{{ row.city }}{{ row.area
                  }}{{ row.address }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </rt-list>
    </rt-content>
    <rt-footer
      ><rt-tabbar
        :tab-list="tablist"
        v-model="tabbar1"
        :select-color="selectColor1"
        :color="color1"
        @on-item-click="itemChange"
    /></rt-footer>
  </rt-view>
</template>
<script>
export default {
  filters: {
    nameStyle(value) {
      if (!value) return '';
      if (value.length > 15) {
        return value.slice(0, 15) + '...';
      }
      return value;
    }
  },
  data() {
    return {
      name: '',
      id: '',
      pageIndex: 0,
      borderWidth: '2px',
      color: '#8B9FC6',
      selectColor: '#53A4FC',
      tablist: [
        {
          name: '文章',
          img: require('@/assets/icons/svgs/article_line.svg'),
          imgActive: require('@/assets/imgs/article_active.png')
        },
        {
          name: '活动',
          img: require('@/assets/icons/svgs/activity_line.svg'),
          imgActive: require('@/assets/imgs/activity_active.png')
        },
        {
          name: '个人中心',
          img: require('@/assets/icons/svgs/mine_line.svg'),
          imgActive: require('@/assets/imgs/mycenter_active.png')
        }
      ],
      tabbar1: 1,
      color1: '#8B9FC6',
      selectColor1: '#0099FF'
    };
  },
  mounted() {},
  methods: {
    // 点击搜索框进入活动搜索页
    click() {
      this.$router.push({
        path: 'search-campaign'
      });
    },
    itemChange(value, item) {
      // console.log(value);
      if (value === 0) {
        this.$router.push({
          name: 'article-page'
        });
      } else if (value === 2) {
        this.$router.push({
          name: 'mycenter'
        });
      }
    },
    fetch(page) {
      return this.getDataList(page).then(resp => {
       /* if (this.pageIndex > 1) {
          this.pageIndex = 0;
          return [];
        }*/
        this.pageIndex++;
        return resp;
      });
    },
    getDataList(page) {
      return new Promise(resolve => {
        const data = {
          pageIndex: page.pageIndex,
          pageSize: page.pageSize,
          name: this.name
        };
        rt.get('/api/bbs/campaign/listappcampaign', data).then(res => {
          resolve(res);
        });
      });
    },
    clickToDetail(row) {
      this.$router.push({
        name: 'campaign-detail',
        query: { id: row.bbs_campaignid }
      });
    },
    showRemotePic(path){
      return rt.showRemotePic(path);
    },
    showErrorPic(e){
      rt.showErrorPic(e);
    },
    onSearch() {
      this.$refs['fetchList'].refreshData(1);
    },
    closePage() {
      rt.closeAppPage();
    },
    toggle(showHeader) {
      this.showHeader = showHeader;
      this.$refs.content.resizeStyle();
    }
  }
};
</script>

<style lang="less" scoped>
main {
  p {
    padding: 15px;
    color: #888888;
    font-size: 14px;
  }
}
.cus-content {
  .account-item {
    padding: 0 10px;
    .card-content {
      background-color: #ffffff;
      width: 100%;
      border-radius: 10px;
      box-shadow:2px 2px 6px 2px rgba(20,62,129,0.1);
      text-align: center;
      .top-img-title {
        .img-info {
          border-radius: 10px 10px 0 0;
          position: relative;
          height: 163px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px 10px 0 0;
            margin: 0 auto;
          }
        }
        .title-info {
          //bottom: 50px;
          //position: relative;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
          font-weight: bold;
          //color: #fff;
          text-align: left;
          font-size: 17px;
          padding: 10px 15px 0 20px;
        }
      }
    }
    .account-content {
      margin: 10px 0 10px 20px;
      padding-bottom: 10px;
      display: flex;
      flex-direction: column;
      text-align: left;
      .img-svg {
        width: 16px;
        height: 16px;
        float: left;
        margin-right: 5px;
        margin-top: -0.8px;
      }
      .new_time {
        //display: inline;
        color: #555;
        font-size: 13px;
        padding-bottom: 5px;
      }
      .new_address {
        color: #555;
        padding-bottom: 10px;
        font-size: 13px;
      }
    }
  }
}
</style>
